<!--
 * @Description: 订单页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: nvliali
 * @LastEditTime: 2022-05-17 16:08:09
-->
<template>
  <div>
     <!-- {{ orderData }} -->
    <!-- 头部 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-nav-bar title="订单" />
      <!-- 订单详情头部 --> 
      <div class="tabs-div">
        <van-tabs v-model="active" title-active-color="#bf73ff" color="#bf73ff" @click="onClick" sticky>
          <van-tab :title="item" v-for="item in nameData" :key="item">
            <div v-if="orderData.length">
                <van-row type="flex" justify="center">
                <div class="user_box" v-for="item in orderData" :key="item.id" @click="$router.push('orderDetail')">
                <div class="left">
                  <img :src="item.customer.userFace" alt="">
                </div>
                <div class="right">
                  <div>
                    <span>{{item.customer.username}}</span>
                    <span class="paidan">{{item.status}}</span>
                  </div>
                  <div class="dz">
                    <span class="dizhi">{{item.address.province 
                      + item.address.city + item.address.area + item.address.address}}</span>
                  </div>
                  <div>
                    <!-- <span>2022-05-15 12:27:43</span> -->
                        <span>{{ item.serviceTime | dateFormat}}</span>
                    <span class="jine">${{item.total}}</span>
                  </div>
                </div>
                  </div>
                </van-row>
            </div>
            <div v-else>
              <van-empty :description="`您没有${nameData[active]}的订单`" />
            </div>
          </van-tab>
        </van-tabs>                             
      </div>
      <div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { pageQueryOrder} from "@/api/index.js";
export default {
  data() {
    return {
      active: 0,
      orderData: [],
      nameData: ['全部订单', '待派单', '待接单', '待确认', '已完成'],
      isLoading: false,
      // 调用订单接口传的参数
      params: { 
        page: '1',
        pageSize: '20',
        // 获取的数据为全部订单的订单数据
        status: undefined,  
      }
    };
  },
  computed: {},
  methods: {
    async loadOrder() {
      let res = await pageQueryOrder (this.params);
      console.log(res);
      this.isLoading = false
      this.orderData = res.data.data.list;
    },
      // 点击标签触发的事件
      onClick (index, status) {
      console.log(status, 'status');
      if (status !== '全部订单') {  
        // index !== 0 代表 点击的不是全部订单，获取'待派单', '待接单', '待确认', '已完成'其中一个的信息数据
        // 待派单
        this.params.status = status
      } else {
        // 如果点击的是全部订单，那么就获取全部订单的信息数据
        this.params.status = undefined
      }
      this.loadOrder()
    },
    onRefresh() {
      setTimeout(() => {
        this.loadOrder();
      }, 500)
    },
  },
    

  created(
  ) {
    this.loadOrder()
  },
  mounted() {}
};
</script>



<style scoped>
.tabs-div {
  padding-bottom: 50px;
}
  .nav-title {
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 16px;
     margin-top: 10px;
}
.user_box {
  width: 80%;
  height: 87px;
  margin: 0 0 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  
}
.left {
    width: 80px;
    height: 80px;
    background-color: #9002bf;
    border-radius: 50%;
}
.left img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.right {
  margin-left: 1em;
    flex: 2;
    height: 80px;
}

.paidan {
    float: right;
    font-size: 11px;
    color: #ff0606;
}

.dz {
    margin-top: 10px;
    margin-bottom: 10px;
}
.dizhi {
    font-size: 12px;
    margin-top: 1em;
    color: #666;
}
.jine {
    float: right;
    text-align: right;
}
</style>